import { useEffect, useState, useMemo, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { setStore } from '@/reducers/common';
import { useNavigate, Link } from 'react-router-dom';
import { Typography } from 'antd';
import loadable from '@loadable/component';

import useAuthAction from '@/hooks/useAuthAction';
import { getKeyFromUrl, formatNumber } from '@/utils';
import { MERCH_NATURE } from '@/config';
import { MERCH_EDIT, EDIT_HISTORY, WORK_DETAIL, ROLE_DETAIL } from '@/config/url';
import { getMerchInfo, likeMerch, unLikeMerch, haveMerchUp, haveMerchDown, wantMerchUp, wantMerchDown } from '@/service/api';
import useDevice, { DEVICES } from '@/hooks/useDevice';
import styles from './index.module.scss';

export default ({dataSource={}}) => {
    const initState = () => ({
        posterVisible: false,

        expanded: false,
    });
    const [state, setState] = useState(initState);
    const { userInfo={} } = useSelector(s => s.common);
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const withAuth = useAuthAction();
    const isMobile = useDevice() === DEVICES.MOBILE;
    const id = getKeyFromUrl('id');
    const infoConfig = [
        {key: 'seriesName', label: '作品', render: (input, o) => {
            const seriesList = Array.isArray(input.seriesList) ? input.seriesList : [];
            if (!seriesList.length) return null;
            
            return seriesList.map((item) => {
                if (!item.id || !item.seriesName) return null;
                return <div key={item.id} className={styles['tag']}><Link to={`${WORK_DETAIL}?id=${item.id}`}>{item.seriesName}</Link></div>
            }).filter(Boolean);
        }},
        {key: 'charactarName', label: '角色', render: (input, o) => {
            const charactarList = Array.isArray(input.charactarList) ? input.charactarList : [];
            if (!charactarList.length) return null;
            
            return charactarList.map((item) => {
                if (!item.id || !item.charactarName) return null;
                return <div key={item.id} className={styles['tag']}><Link to={`${ROLE_DETAIL}?id=${item.id}`}>{item.charactarName}</Link></div>
            }).filter(Boolean);
        }},
        {key: 'nature', label: '性质', render: (input, o) => MERCH_NATURE.find(i => i.value === input?.[o.key])?.label},
        {key: 'categoryName', label: '品类'},
        {key: 'author', label: '作者', render: (input, o) => {
            return (input?.[o.key]||'').split(',').filter(Boolean).map((item, index) => {
                return <div key={index} className={styles['tag']}>{item}</div>
            })
        }},
        {key: 'publicationYear', label: '年份'},
        {key: 'madeIn', label: '产国'},
        {key: 'introduce', label: '详情', render: (input, o) => {
            if(!input?.[o.key]) return null;
            return (
                <Typography.Paragraph
                    ellipsis={{
                        rows: isMobile ? 2 : 18,
                        expandable: 'collapsible',
                        expanded: state.expanded,
                        onExpand: (_, info) => setState(o => ({...o, expanded: info.expanded})),
                    }}
                    copyable={false}
                >
                    {input?.[o.key] || ''}
                </Typography.Paragraph>
            );
        }},
    ];

    return (
        <div className={styles['container']}>
            <div className={styles['info-container']}>
                {
                    infoConfig.map(item => (
                        <div key={item.key} className={styles['info']}>
                            <div className={styles['label']}>{item.label}</div>
                            <div className={styles['value']}>{item?.render?.(dataSource, item) || dataSource?.[item.key] || ''}</div>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}
